<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="libs/jquery.min.js"></script>
	<script type="text/javascript" src="libs/jquery.easyui.min.js"></script>
	<style>
		.p-search{
			background:#fafafa;
			padding:5px;
			border:1px solid #ccc;
			border-bottom:0;
			overflow:hidden;
		}
		.p-search input{
			width:400px;
			border:1px solid #ccc;
			background: #fff url('images/search.png') no-repeat right top;
		}
		.p-right{
			text-align:center;
			border:1px solid #ccc;
			border-left:0;
			width:150px;
			background:#fafafa;
			padding-top:10px;
		}
	</style>
</head>
<body style="background:#fafafa;">
<h1>Panel</h1>
<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
	<div class="easyui-layout" fit="true">
		<div region="north" border="false" class="p-search">
			<label>Search: </label><input></input>
		</div>
		<div region="center" border="false">
			<div class="easyui-layout" fit="true">
				<div region="east" border="false" class="p-right">
					<img src="images/msn.gif"/>
				</div>
				<div region="center" border="false" style="border:1px solid #ccc;">
					<div class="easyui-layout" fit="true">
						<div region="south" split="true" border="false" style="height:60px;">
							<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
						</div>
						<div region="center" border="false">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>